<template>
	<view class="modifyName">
		<u-input placeholder="请输入您的名称" @input="input" border="surround" maxlength="18" v-model="username"
			clearable="true"></u-input>
		<view class="baocun" :class="isShow?'active':'disable'">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '', //用户名
				isShow: false,
				//验证的规则
				rules: {
					username: {
						rule: /.{2,18}/,
						msg: "请输入2-18字符名称"
					}
				}
			}
		},
		methods: {
			input(e) {
				if (!this.validate('username')) {
					this.isShow = false
					return;
				} else {
					this.isShow = true
				}

			},
			//判断验证是否符合要求
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'error'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
		}
	}
</script>

<style lang="less" scoped>
	.modifyName {
		padding: 40rpx;

		.baocun {
			margin-top: 80rpx;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			opacity: 1;
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}

		.disable {
			background-color: #D8D8D8;
		}

		.active {
			background-color: #FF7200;
		}
	}
</style>
